<!DOCTYPE html>
<script src="/kissy/build/seed-debug.js"></script>
<script src="/kissy/src/package.js"></script>
<style type="text/css">
    .clearfix:after{
        content: '';
        height: 0;
        display: block;
        clear: both;
    }
    label{
        float: left;
    }
</style>


<select name="aa" id="test">
    <option>1</option>
    <option selected>2</option>
</select>

<div>
    <input type="button" value="复制1" id="copyTrigger1"/>
    <div class="clearfix">
        <label>复制后(Node.clone):</label>
        <div id="wrap1"></div>
    </div>
    <input type="button" value="复制2" id="copyTrigger2">
    <div class="clearfix">
        <label>原生方法(cloneNode):</label>
        <div id="wrap2"></div>
    </div>
</div>

<script type="text/javascript">
    KISSY.use('node', function (S, Node) {
        var $ = Node.all;
        // bug in ie6-8
        $('#copyTrigger1').on('click', function() {
            $('#test').clone(1, 1, 1).appendTo('#wrap1');
        });
        $('#copyTrigger2').on('click', function() {
            var newNode = document.getElementById('test').cloneNode(true);
            document.getElementById('wrap2').appendChild(newNode);
        })
    })
</script>